import React from 'react'
import {TabBar } from 'antd-mobile'
import styles from './css/MyTabBar.module.css'
import {
    AppOutline,
    MessageOutline,
    MessageFill,
    UnorderedListOutline,
    UserOutline,
  } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
function MyTabBar() {
    const nav=useNavigate()
    const tabs = [
        {
          key: '/home',
          title: '首页',
          icon: <AppOutline />,
         
        },
        {
          key: '/ticket',
          title: '抢票',
          icon: <UnorderedListOutline />,
       
        },
        {
          key: '/student',
          title: '学生核验',
          icon: (active) =>
            active ? <MessageFill /> : <MessageOutline />,
          
        },
        {
          key: '/seat',
          title: '在线换座',
          icon: <UserOutline />,
        },
        {
          key: '/order',
          title: '我的订单',
          icon: <UserOutline />,
        },
      ]
    
  return (
    <div className={styles.box}>
         <TabBar onChange={(key)=>nav(key)}>
          {tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
    </div>
  )
}

export default MyTabBar